<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>																			
<%@ include file="/WEB-INF/view/jsp/base.jsp" %>																																	
<html lang="en">
<style>
form,input{
    	margin:0px ;
    	paddiing:0px;
    	font-size: 13px;
    	border-radius: 4px;
    }
.box{
	background:pink;
	width:0px;
	height:0px;
	position:absolute;
	filter:alpha(opacity=45);
	opacity:0.45;
}
</style>
<head>
    <%-- <script src="<%=path %>/resources/jquery/jquery1.9.1.min.js"></script>  --%>
    <script src="<%=path %>/resources/echarts/echarts-all.js"></script>
</head>
<body class="wysihtml5-supported">																																														
	<div id="content" style="padding:15px 0 0 0;">
		<div style="padding-left:10px;">
			<form id="tradeAnalysisForm">
				开始时间：<input type="text" class="date" id="startTime" name="startTime" style="width:150px;"/>
				结束时间：<input type="text" class="date"  id="endTime" name="endTime"  style="width:150px;"/>
				<!-- 交易码：<input type="text" name="tradeCode" style="width:150px;"/>
				去除交易码：<input type="text" name="differTradeCode" style="width:150px;"/> -->
				<input type="hidden" id="tradeCountType" name="tradeCountType" />
				<button type="button" class="btn btn-info" id="tradeAnalysisQuery" style="margin-left:5px;margin-bottom: 10px;">查询</button>
			</form>
		</div>
		<div id="echarts1" style="width:70%;height:360px;float:left;">每秒钟交易完成数（折线图）</div>
		<div id="echarts2"  style="width:30%;height:360px;float:left;">每个交易的占比（饼图）</div>
		<div id="echarts3" style="width:70%;height:360px;float:left;">一个时间范围内交易的平均耗时（面积图）</div>
		<div id="echarts4"  style="width:30%;height:360px;float:left;">每个交易的耗时占比（饼图）</div>
	</div>																																														

<script type="text/javascript">

$(document).ready(function(){
	$('.date').datetimepicker({
		language:'zh-CN',
		format:'yyyy-mm-dd hh:ii:ss',
		//minView:"day",
		initialDate:new Date(),
		autoclose:true,
		todayBtn:true
	});
	
	//设置开始默认时间（开始时间和结束时间差10分钟）
	 var endTime= new Date(); 
	 var startTime = new Date();
	 $("#startTime").val(dateString(startTime.setMinutes(startTime.getMinutes()-10)));
	 $("#endTime").val(dateString(endTime)); 

 	//加载
	load();

});

	//加载图表
	//-------------------------------------------//

	var dom1 = document.getElementById("echarts1");
	var mycharts1 ;
	option1 = null ;
	option1={
		title:{text:"交易完成数"},
		tooltip:{trigger:"axis"},
		legend:{data:["交易数"]},
		toolbox:{
			show:true,
			feature:{
				mark:{show:false},
				dataZoom:{show:false},
				dataView:{show:true,readOnly:false},
				magicType:{show:true,type:["line","bar"]},
				restore:{show:false},
				saveAsImage:{show:false}
			}
		},
		dataZoom:{
			show:false,
			realtime:true,
			xAxisIndex:[0],
	 		start:0,
			end:100 
		},
		calculate:true,
		xAxis:[],
		yAxis:[
			{
				name:"交易量",
				type:"value",
				axisLabel:{formatter:"{value}"}
			}
		],
		series:[]
	};

	//------------------------------------------//

	var dom3 = document.getElementById("echarts3");
	var mycharts3 ;
	option3 = null ;
	option3={
			title:{text:"平均耗时"},
			legend:{},
			tooltip:{trigger:"axis"},
			toolbox:{
				show:true,
				feature:{
					//mark:{show:true},
					dataZoom:{show:false},
					dataView:{show:true,readOnly:false},
					magicType:{show:true,type:["line","bar"/* ,"stack","tiled" */]},
					restore:{show:false},
					//saveAsImage:{show:true}
				}
			},
			dataZoom:{
				show:false,
				realtime:true,
				xAixsIndex:[],
				start:0,
				end:100
			},
			calculable:true,
			xAxis:[],
			yAxis:[{name:"耗时(秒)", type:"{value}s"}],
			series:[]
	};

	//------------------------------------------//

	$("#tradeAnalysisQuery").click(function(){
		
		load();
		
	});
	
	//------------------------------function---------------------------//
	
/****
 * 加载图表数据
 */
function load(param){
    //设置统计类型
    var startDate = new Date($("#startTime").val().replace(/-/g,"/"));
    var endDate   = new Date($("#endTime").val().replace(/-/g,"/"));
    var interval_second = (endDate.getTime() - startDate.getTime()) ;

    //<=15分钟  每秒统计
	if(interval_second <= 1000*60*15){
		$("#tradeCountType").val("S");
	//>15分钟  && <2小时     每10秒统计	
	}else if(interval_second <= 1000*60*60*2){
		$("#tradeCountType").val("10S");
	//>2小时 && <=1天      每分钟统计	
	}else if(interval_second <= 1000*60*60*24){
		$("#tradeCountType").val("M");
	//>1天 && <=7天        每10分钟统计
	}else if(interval_second <= 1000*60*60*24*7){
	    $("#tradeCountType").val("10M");
	//>7天 && <=30天       按小时统计	
	}else if(interval_second <= 1000*60*60*24*30){
		$("#tradeCountType").val("H");
	//>30天    按天统计
	}else{
		$("#tradeCountType").val("D");
	}
	$.ajax({
			url:"<%=path%>/statisticalAnalysis/getData",
			data:$("#tradeAnalysisForm").serialize(),
			type:"post",
			error:function(data){
			},
			success:function(data){
				if(data.success){
					//时间点交易量据曲线图
					if(data.data.echarts1){
						loadEcharts1(data);
					}
					//交易数占比
					if(data.data.echarts2){
						loadEcharts2(data);
					}
					//时间点耗时面积图
					if(data.data.echarts3){
						loadEcharts3(data);
					}
					//交易耗时占比
					if(data.data.echarts4){
						loadEcharts4(data);
					}
				}
			}
			
	});
	
	//一分种后开启刷新定时器
 	setTimeout(function(){},60*1000); 
	//定时器
	timeTicket = setInterval(function(){
		 //设置开始默认时间
		 var date = new Date() ;
	     //查询条件中的开始和结束时间
		 var startTimeStr = $("#startTime").val();
		 var endTimeStr = $("#endTime").val();
		 startTimeStr.replace(/-/g,"/");
		 endTimeStr.replace(/-/g,"/");
		 var startTime = new Date(startTimeStr);
		 var endTime = new Date(endTimeStr);
		 var flush_interval_time = date.getTime() - endTime.getTime();
		 //当定时器触发时，如果查询条件中的结束时间与系统时间的差值不是1分钟的时候，不加载新数据
		 if(flush_interval_time >= 0 && flush_interval_time <= 60*1000*2){
			 endTime.setMinutes(endTime.getMinutes()+1);
			 startTime.setMinutes(startTime.getMinutes()+1);
			 //追加数据 的开始时间
			 var startTime1  = new Date(endTimeStr);
			 startTime1.setSeconds(startTime1.getSeconds()+1);
			 //更新查询条件中的开始和结束时间
			 
		 	 $("#startTime").val(dateString(startTime));
			 $("#endTime").val(dateString(endTime));
			 //设置新参数，加载最新一分钟的数据
			 var param1 = {} ;
	         param1.startTime = dateString(startTime1);
	         param1.endTime = dateString(endTime);
	         param1.tradeCountType=$("#tradeCountType").val();
	         //曲线图
	         addLoadLineData(param1);
			 var param2 = {} ;
	         param2.startTime = dateString(startTime);
	         param2.endTime = dateString(endTime);	
	         //饼图
	         addLoadPieData(param2);			
		}
	},60*1000);  
}


function addLoadLineData(param){
	//递增添加曲线图数据 
	$.ajax({
		url:"<%=path%>/statisticalAnalysis/getLineData",
		data:param,
		type:"post",
		error:function(data){
		},
		success:function(data){
			if(data.success){
 				//时间点交易量据曲线图(扩展)
				if(data.data.echarts1){
					addDataEcharts1(data);
				}
				//时间点耗时面积图
				if(data.data.echarts3){
					addDataEcharts3(data);
				}
			}
		}
		
	});
}

//直接刷新饼图
function addLoadPieData(param){	
	//直接刷新饼图
	$.ajax({
		url:"<%=path%>/statisticalAnalysis/getPieData",
		data:param,
		type:"post",
		error:function(data){
		},
		success:function(data){
			if(data.success){
				//交易数占比
				if(data.data.echarts2){
					loadEcharts2(data);
				} 
 				//交易耗时占比
				if(data.data.echarts4){
					loadEcharts4(data);
				} 
			}
		}
		
	});
}	
	
	
	
//echarts1
function loadEcharts1(text){
	mycharts1 = echarts.init(dom1);
	var _xData ;
	if(option1 && typeof option1 === "object"){
	    var _xAxis = text.data.echarts1.xAxis ;
	    var _series = text.data.echarts1.series;
	    var xAxis = [] ;
		for(var i=0;i<_xAxis.length;i++){
			_xData = _xAxis[i].data ;
			var x = {
					name:/* "时间" */_xAxis[i].name,
					type:"category",
					boundaryGap:false,
					data:_xAxis[i].data
					/* axisLabel:{
						rotate:45
						interval:0
					}  */
				};
			xAxis.push(x);
		}
		var series=[];
		for(var i=0;i<_series.length;i++){
			var item = {
					name:_series[i].name,
					type:'line',
					data:_series[i].data,
						markPoint:{
						data:[
							{type:'max',name:'最大值'},
							{type:'min',name:'最小值'}
						]
					}, 
					markLine:{
						data:[
							{type:"average",name:"平均值"}
						]
					}
				} ;					
			series.push(item);
		}
		option1.xAxis = xAxis;
		option1.series = series ;
		mycharts1.setOption(option1);
	}
    
	//鼠标按下事件
	//记录鼠标的当前位置信息
	var currentPostion ;      
	var zoomDivX , zoomDivY ;  //选区的起始坐标
	var _mouseChartStartX,_mouseChartEndX;  //鼠标相对表格的位
	mycharts1.dom.onmousedown = function(e){
	   e = e || window.event ; 	
	   if(!e.altKey) return false ;
	   if($("#zoomDivId")){
		  $("#zoomDivId").remove();
	   }
	   zoomDivX = e.clientX;
	   zoomDivY = e.clientY;
	   _mouseChartStartX = currentPostion.zrenderX;
	   //创建一个选区矩形DIV
	   var zoomDiv = document.createElement("div");
	   zoomDiv.id = "zoomDivId";
	   zoomDiv.className = "box";
	   zoomDiv.style.left = zoomDivX + 'px';
	   zoomDiv.style.top  = zoomDivY + 'px';
	   document.body.appendChild(zoomDiv);	
	   //选区div绑定鼠标事件
	   zoomDiv.onmousemove = mycharts1.dom.onmousemove ;
	   zoomDiv.onmouseup = mycharts1.dom.onmouseup ;
	}
	//鼠标移动事件
	var result = {"xStart":"","xEnd":""} ;
	mycharts1.dom.onmousemove = function(e){
	   e = e || window.event ;
	   currentPostion = e ;
	   var _x = mycharts1.component.grid._x;         //坐标原点横坐标
	   var _width = mycharts1.component.grid._width; //表格宽度
	   var xx =  e.clientX;   //鼠标当前X坐标
	   var yy =  e.clientY;   //鼠标当前Y坐标
	   var rectWidth;   //选区宽度
	   var rectHeight;  //选区高度
	   currentPostion.zrenderX =  currentPostion.zrenderX || (xx) ; //兼容IE 获取鼠标相对图表 的位置
	   _mouseChartEndX =  currentPostion.zrenderX ;
	   //更新box尺寸
	   if(document.getElementById("zoomDivId")!==null){
		   var ab = document.getElementById("zoomDivId");
		   rectWidth  = xx - zoomDivX ;
		   rectHeight = yy - zoomDivY ; 
		   ab.style.left = (xx < zoomDivX ? xx : zoomDivX)  + 'px';
		   ab.style.top  = (yy < zoomDivY ? yy : zoomDivY) + 'px';
		   ab.style.width  = Math.abs(rectWidth) + 'px';
		   ab.style.height = Math.abs(rectHeight) + 'px';	
	   }
	   //获取选区的左右位置
	   //设置起始范围
	   _mouseChartStartX = (_mouseChartStartX >= _x) ? _mouseChartStartX : _x ;
	   _mouseChartEndX = (_mouseChartEndX <= (_x + _width)) ? _mouseChartEndX : (_x+_width);
	   var _indexLeft  = (((_mouseChartStartX <= _mouseChartEndX) ? _mouseChartStartX : _mouseChartEndX) - _x ) / (_width/_xData.length);  //左刻度索引
	   var _indexRight = (((_mouseChartEndX >= _mouseChartStartX) ? _mouseChartEndX : _mouseChartStartX) - _x ) / (_width/_xData.length);  //右刻度索引
	   result.xStart = _xData[Math.floor(_indexLeft)];   //选区起始位置
	   result.xEnd   = _xData[Math.ceil(_indexRight)-1] ; //选区结束位置
	}
	//鼠标弹起事件
	mycharts1.dom.onmouseup = function(e){
		e = e || window.event ;
		if(document.getElementById("zoomDivId")!==null){
			  $("#zoomDivId").remove();
		}
		zoomDivX = "" ;
		zoomDivY = "";
		_mouseChartStartX =  "";
		_mouseChartEndX =  "";
        if(e.altKey && result.xStart && result.xEnd){
    		$("#startTime").val(result.xStart);
            $("#endTime").val(result.xEnd);
            load();
        }
		//console.log(result);
	}

}

//追加数据
function addDataEcharts1(text){
	var _xAxis = text.data.echarts1.xAxis ;
    var _series = text.data.echarts1.series;
    for(var i=0;i<_xAxis[0].data.length;i++){
    	mycharts1.addData([
		 		[0,_series[0].data[i],false,false,_xAxis[0].data[i]]
		]);
	} 
}


//echarts2
function loadEcharts2(text){
	var dom2 = document.getElementById("echarts2");
	var mycharts2 = echarts.init(dom2);
		option2 = null ;
		option2 = {
				title:{text:"交易数占比", x:"center" },
				tooltip:{trigger:"item", formatter:"{a}<br/>{b}:{c}({d}%)"},
				series:[]
		};
		var _series = text.data.echarts2.series;
		var series=[];
		for(var i=0;i<_series.length;i++){
			var item = {
		        	//name:_series[i].name,
		        	type:"pie",
		        	radius:"55%",
		        	center:["50%","50%"],
		        	data:_series[i].data,
		        	itemStyle:{
		        		emphasis:{
		        			shadowBlur:10,
		        			shadowOffsetX:0,
		        			shadowColor:"rgba(0,0,0,0.5)"
		        		}
		        	}      
		        } ;					
			series.push(item);
		}
		option2.series = series ;
		mycharts2.setOption(option2);
}

//echarts3
function loadEcharts3(text){
	mycharts3 = echarts.init(dom3)
	if(option3 && typeof option3 === "object"){
	    var _legendData = text.data.echarts3.legendData ;
		var _xAxis = text.data.echarts3.xAxis ;
	    var _series = text.data.echarts3.series;
	    var legend = {"data":_legendData};
	    var xAxis = [] ;
		for(var i=0;i<_xAxis.length;i++){
			var x = {
					name:/* "时间" */_xAxis[i].name,
					type:"category",
					boundaryGap:false,
					data:_xAxis[i].data,
					/* axisLabel:{
						interval:0
					} */
				};
			xAxis.push(x);
		}		
		var series=[];
		for(var i=0;i<_series.length;i++){
			var item = {
					name:_series[i].name,
					type:"line",
					stack:"总量",
					itemStyle:{normal:{areaStyle:{type:"default"},linkStyle:{type:"curve"}}},
				    data:_series[i].data
				} ;					
			series.push(item);
		}
		option3.legend = legend ;
		option3.xAxis = xAxis ;
		option3.series = series ;
		mycharts3.setOption(option3);
	}
	//mycharts3.on(echarts.config.EVENT.CLICK,eConsole);
}

//追加数据
function addDataEcharts3(text){
	var _xAxis  = text.data.echarts3.xAxis ;
    var _series = text.data.echarts3.series;
	for(var i=0;i<_xAxis[0].data.length;i++){
			mycharts3.addData([
			 			      [0,_series[0].data[i],false,false,_xAxis[0].data[i]],
			 			      [1,_series[1].data[i],false,false],
			 			      [2,_series[2].data[i],false,false],
			 			      [3,_series[3].data[i],false,false]
			]);
	}
}

//echarts4
function loadEcharts4(text){

	var dom4 = document.getElementById("echarts4");
	var mycharts4 = echarts.init(dom4);
	option4 = null ;
	option4 = {
			title:{text:"交易耗时占比", x:"center"},
			tooltip:{trigger:"item",formatter:"{a}<br/>{b}:{c}({d}%)"},
			series:[]							
	};
	
	if(option4 && typeof option4 === "object"){
		var _series = text.data.echarts4.series;
		var series=[];
		for(var i=0;i<_series.length;i++){
			var item = {
		        	name:_series[i].name,
		        	type:"pie",
		        	radius:"55%",
		        	center:["50%","50%"],
		        	data:_series[i].data,
		        	itemStyle:{
		        		emphasis:{
		        			shadowBlur:10,
		        			shadowOffsetX:0,
		        			shadowColor:"rgba(0,0,0,0.5)"
		        		}
		        	}      
		        } ;					
			series.push(item);
		}

		option4.series = series ;
		mycharts4.setOption(option4);
	}
}

//取得yyyy-MM-dd hh:mm:ss格式的日期字符串
 /* Date.prototype.toString=function(){
	  var dt = this;
	  var year = dt.getFullYear();
	  var month = dt.getMonth()+1;
	  var day = dt.getDate()
	  var h = dt.getHours();
	  var m = dt.getMinutes();
	  var s = dt.getSeconds();
	return  year+"-"+getTure(month)+"-"+getTure(day)+" "+getTure(h)+":"+getTure(m)+":"+getTure(s);
}
*/

 function dateString(date){
	//console.log(date+"<======date");
     var dt = new Date(date);
     // console.log(dt+"<======dt");
	  var year = dt.getFullYear();
	  var month = dt.getMonth()+1;
	  var day = dt.getDate()
	  var h = dt.getHours();
	  var m = dt.getMinutes();
	  var s = dt.getSeconds();
	return  year+"-"+getTure(month)+"-"+getTure(day)+" "+getTure(h)+":"+getTure(m)+":"+getTure(s);
}

function getTure(str){
	
	if(str.toString().length<2){
		return "0"+str;
	}else{
		return str;
	}
} 

//删除定时器
function delInterval(id){
	if(id != null){
		clearInterval(id);
	}
}


//var ecConfig = require('echarts/config');
function eConsole(param){
	//alert("0.0");
	//console.log(param);
}


</script>	
</body>																																														
</html>	    																																												

